<% layout('layout_header') -%>

<div class="row shadow span9">
    <div class="span5">		
		<form action="/login" method="post" accept-charset="UTF-8" onsubmit="return CheckBeforeSubmission();">
			<h3>Login</h3>
			<h5 id="error1" style="color:red"> <%= error %></h5>
			<h5 id="error" style="color:red"></h5>
			<input id="email" name="email" type="text" style="margin-bottom: 15px;" size ="30" class="span3" placeholder="Username"/> </br>
			<input id="password" name="password" type="password" style="margin-bottom: 15px;" size ="30" class="span3" placeholder="Password"/> </br>
			<input id="user_remember_me" style="color:red; float: left; margin-right: 10px;" type="checkbox" value="1"/>Remember me </br></br>
			<button type="submit" class="btn btn-success"><i class="icon-user icon-white"></i> Sign In </button> </br></br>
			<p><a href="/login" rel="external">Forgot Password</a></p>
			<p>New here? <a href="/register" rel="external">Create an Account</a> </p>
		</form>
	</div>

    <div class="span3">
        <form action="/login" method="post" accept-charset="UTF-8" >
         <h3> Or log in with  </h3>
         <button type="submit" class="btn btn-success">Google Account</button> <br>
        </form>
    </div>   
</div> <!-- shadow1 -->

<script type="text/javascript">
    function CheckBeforeSubmission()
    {
    	$('#error1').hide();
        if( ! $('#email').val() ) {
            $('#error').html('Please enter the username');
        } else if( ! $('#password').val() ) {
            $('#error').html('Please enter the password');
        } else {
            return true;
        }
       return false;
    }
</script>